<template>
    <div class="model-list-body">
        <div class="header">
            <div class="left-title">
                <img class="left-img" src="https://img.js.design/assets/img/62732d175330b31038157f2c.png">
                <span class="title2" :class="activeName == '我的课程' ? 'activeCourse':''" @click="getMyVideoCourse">我的课程</span>
                <span class="title2" style="margin-left: 10px" :class="activeName == '免费试听' ? 'activeCourse':''" @click="freeVideo">免费试听</span>
            </div>
            <div class="right-more">
                <span @click="moreCourse">更多</span>
                <el-icon>
                    <ArrowRightBold/>
                </el-icon>
            </div>
        </div>
        <div class="body">
            <div v-if="activeName == '我的课程'">
                <el-row v-if="myVideoCourseList && myVideoCourseList.length" :gutter="20">
                    <el-col
                            v-for="(item,index) in myVideoCourseList.slice(0,4)"
                            :key="index"
                            :span="6"
                    >
                        <el-card style="cursor: pointer" @click="toCourse(item)" :body-style="{ padding: '0px' }">
                            <img
                                    :src="item.bannerPic"
                                    class="image"
                            />
                            <div style="display: flex;align-items: center;justify-content: space-between">
                                <span style="font-size: 16px;margin-left: 1rem">{{item.name}}</span>
                                <div class="bottom">
                                    <div></div>
                                    <el-button text class="button"><span style="color: rgba(153, 153, 153, 1);font-size: 16px;">共{{item.chapterNum}}章</span>
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row v-else>
                    <el-col>
                        <el-empty description="暂无数据" />
                    </el-col>
                </el-row>
            </div>
            <el-row v-if="activeName == '免费试听'" :gutter="20">
                <el-col
                        v-for="(item, index) in freeVideoList.slice(0,4)"
                        :key="index"
                        :span="6"
                >
                    <el-card @click="toFreeVideo(item)" :body-style="{ padding: '0px',cursor:'pointer' }">
                        <img
                                height="160"
                                :src="item.bannerPicWeb || item.bannerPic"
                                class="image"
                        />
                        <div style="display: flex;align-items: center;justify-content: space-between">
                            <span style="font-size: 1rem;margin-left: 1rem">{{item.name}}</span>
                            <div class="bottom">
                                <div></div>
                                <el-button text class="button"><span style="color: rgba(153, 153, 153, 1);"></span>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {ref, getCurrentInstance,watchEffect} from "vue";
    import {useRouter} from "vue-router";
    import {videoMyCoursesList,videoFreeVideoList} from "@/api/api";
    import {videoFreeCourse} from "../api/api";

    export default {
        name: "IndexModelList",
        props: {
            courseList: {
                type: Array,
                default: () => []
            },
            activeCourse:{
                type:String
            }
        },

        setup(props) {

            let activeName = ref('我的课程');
            let defaultFreeSubject = ref('');//默认免费课程科目id
            //我的课程科目列表
            let myVideoCourseList = ref([]);
            let getMyVideoCourse = () => {
                videoMyCoursesList({courseID: localStorage.getItem('activeCourse')}).then(res => {
                    console.log('课程网课列表', res);
                    activeName.value = '我的课程'
                    myVideoCourseList.value = res.data
                })
            }
            getMyVideoCourse();

            watchEffect(() =>{
                let activeCourse = props.activeCourse;
                console.log('activeCourse',activeCourse);
                getMyVideoCourse();
            })

            const currentDate = ref(new Date());
            let router = useRouter();
            const {proxy} = getCurrentInstance()
            let toCourse = (item) => {
                router.push({name:'VideoPlayer',params:{subject_id:localStorage.getItem('activeCourse'),subject_name:localStorage.getItem('activeCourseName'),id:item.id,chapterID:0}})
            }

            let toFreeVideo = (item) => {
                console.log(item);
                router.push({name: 'MoreFreeVideo', params: {activeName:activeName.value,subject_id:item.id}});
            }

            let freeVideoList = ref([]);
            let freeVideoId = ref(0)
            let freeVideo = () =>{
                activeName.value = '免费试听';
                videoFreeCourse().then(res =>{
                    console.log('免费试听分类',res.data[0].id)
                    videoMyCoursesList({courseID:res.data[0].id}).then(res =>{
                        console.log('免费试听分类下的科目列表',res.data)
                        freeVideoList.value = res.data
                        freeVideoId.value = res.data[0].id;
                    })
                })
            }

            let moreCourse = () =>{
                if(activeName.value == '我的课程'){
                    router.push({name: 'MyCourseAccount'})
                }else{
                    router.push({name: 'MoreFreeVideo', params: {activeName:activeName.value,subject_id:Number(freeVideoId.value)}});
                }
            }
            return {
                freeVideoId,
                defaultFreeSubject,
                toFreeVideo,
                moreCourse,
                getMyVideoCourse,
                activeName,
                freeVideo,
                myVideoCourseList,
                proxy,
                toCourse,
                currentDate,
                freeVideoList
            }
        }
    }
</script>

<style>
    .body .el-card{
        height: 100%;
    }
    .time {
        font-size: 12px;
        color: #999;
    }

    .bottom {
        margin-top: 2rem;
        line-height: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button {
        font-size: 0.875rem;
        margin-right: 0.5rem;
        padding: 0;
        min-height: auto;
    }

    .image {
        width: 100%;
        display: block;
    }
</style>

<style scoped>
    .activeCourse{
        color: rgba(51, 51, 51, 1) !important;
        font-size: 20px;
        font-weight: 400;
    }
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0px;
    }

    .model-list-body {
        width: 100%;
        height: 50%;
    }

    .left-title {
        display: flex;
        align-items: center;
    }

    .left-title .left-img {
        width: 1.8125rem;
        margin-right: 1rem;
    }

    .header .left-title .title {
        font-size: 1.25rem;
        color: rgba(51, 51, 51, 1);
        margin-right: 0.6875rem;
    }

    .header .left-title .title2 {
        font-size: 16px;
        color: rgba(128, 128, 128, 1);
        cursor: pointer;
    }

    .right-more {
        display: flex;
        align-items: center;
        color: rgba(153, 153, 153, 1);
        cursor: pointer;
    }
</style>
